<script setup lang="ts">
import { FileUpload } from "@/components/common/FileUpload";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ep/plus";
import { ref } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    affiliatedUnit: "",
    allAuthor: "",
    cnNum: "",
    correspondingAuthor: "",
    doi: "",
    firstAuthor: "",
    firstAuthorType: "",
    firstSubject: "",
    firstUnit: null,
    hireDate: "",
    hireFiles: "",
    includeLevel: "",
    threeHighCategory: "",
    interNum: "",
    layout: "",
    meetingName: "",
    obtainReward: "",
    obtainRewardFiles: "",
    paperName: "",
    paperPartition: "",
    paperType: "",
    proceedings: "",
    relyProject: "",
    schoolSignature: "",
    searchDate: "",
    searchFiles: "",
    secondAuthor: "",
    secondAuthorType: "",
    showSecondAuthor: false,
    seeDate: "",
    seeFiles: "",
    subject: "",
    submitDate: "",
    submitFiles: "",
    volumePage: "",
    transformPrice: null,
    userIds: null,
    score: 0
  }),
  userList: null
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const changeSecondAuthor = type => {
  newFormInline.value.showSecondAuthor = type == 1 ? true : false;
  newFormInline.value.secondAuthor = "";
  newFormInline.value.secondAuthorType = "";
};

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    :inline="true"
    class="add-form"
    label-width="125px"
  >
    <el-form-item label="论文题目" prop="paperName">
      <el-input v-model="newFormInline.paperName" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="论文类型" prop="paperType">
      <el-select
        v-model="newFormInline.paperType"
        placeholder="请选择"
        clearable
      >
        <el-option label="会议论文" value="会议论文" />
        <el-option label="期刊论文" value="期刊论文" />
        <el-option label="教改论文" value="教改论文" />
      </el-select>
    </el-form-item>

    <el-form-item label="第一作者类型" prop="firstAuthorType">
      <el-select
        v-model="newFormInline.firstAuthorType"
        placeholder="请选择"
        clearable
      >
        <el-option label="学生" value="学生" />
        <el-option label="院内老师" value="院内老师" />
        <el-option label="其他人员" value="其他人员" />
      </el-select>
    </el-form-item>
    <el-form-item label="第一作者" prop="firstAuthor">
      <div class="w-full flex items-center">
        <el-input
          v-model="newFormInline.firstAuthor"
          placeholder="请输入"
          class="flex-1"
        />
        <div v-show="!newFormInline.showSecondAuthor">
          <IconifyIconOffline
            class="cursor-pointer text-lg !w-[35px]"
            :icon="AddFill"
            @click="changeSecondAuthor(1)"
          />
        </div>
      </div>
    </el-form-item>

    <template v-if="newFormInline.showSecondAuthor">
      <el-form-item label="第二作者类型" prop="secondAuthorType">
        <el-select
          v-model="newFormInline.secondAuthorType"
          placeholder="请选择"
          clearable
        >
          <el-option label="学生" value="学生" />
          <el-option label="院内老师" value="院内老师" />
          <el-option label="其他人员" value="其他人员" />
        </el-select>
      </el-form-item>
      <el-form-item label="第二作者" prop="secondAuthor">
        <div class="w-full flex items-center">
          <el-input v-model="newFormInline.secondAuthor" placeholder="请输入" />
          <IconifyIconOffline
            class="text-red-500 cursor-pointer text-lg !w-[35px]"
            :icon="Delete"
            @click="changeSecondAuthor(2)"
          />
        </div>
      </el-form-item>
    </template>

    <el-form-item label="通讯作者" prop="correspondingAuthor">
      <el-input
        v-model="newFormInline.correspondingAuthor"
        placeholder="请输入"
      />
    </el-form-item>

    <el-form-item label="所属单位" prop="affiliatedUnit">
      <el-select
        v-model="newFormInline.affiliatedUnit"
        placeholder="请选择"
        clearable
      >
        <el-option label="无锡学院" value="无锡学院" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>

    <el-form-item label="期刊名" prop="proceedings">
      <el-input v-model="newFormInline.proceedings" placeholder="请输入" />
    </el-form-item>
    <!-- SCIⅠ区、SCIⅡ区、SCIⅢ区、SCIⅣ区、EI、CSCD、北大核心、科技核心、其他 -->
    <el-form-item label="论文收录类别" prop="includeLevel">
      <el-select
        v-model="newFormInline.includeLevel"
        placeholder="请选择"
        clearable
      >
        <el-option label="SCIⅠ区" value="SCIⅠ区" />
        <el-option label="SCIⅡ区" value="SCIⅡ区" />
        <el-option label="SCIⅢ区" value="SCIⅢ区" />
        <el-option label="SCIⅣ区" value="SCIⅣ区" />
        <el-option label="EI" value="EI" />
        <el-option label="CSCD" value="CSCD" />
        <el-option label="北大核心" value="北大核心" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>
    <el-form-item label="三高类别" prop="threeHighCategory">
      <el-select
        v-model="newFormInline.threeHighCategory"
        placeholder="请选择"
        clearable
      >
        <el-option label="T1" value="T1" />
        <el-option label="T2" value="T2" />
        <el-option label="T3" value="T3" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>
    <el-form-item label="投稿日期" prop="submitDate">
      <el-date-picker
        v-model="newFormInline.submitDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>
    <el-form-item label="录用日期" prop="hireDate">
      <el-date-picker
        v-model="newFormInline.hireDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>

    <el-form-item label="见刊日期" prop="seeDate">
      <el-date-picker
        v-model="newFormInline.seeDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>
    <el-form-item label="学科门类" prop="subject">
      <el-input v-model="newFormInline.subject" placeholder="请输入" />
    </el-form-item>

    <!-- <el-form-item label="SCI论文分区" prop="paperPartition">
      <el-input v-model="newFormInline.paperPartition" placeholder="请输入" />
    </el-form-item> -->
    <el-form-item label="一级学科" prop="firstSubject">
      <el-select
        v-model="newFormInline.firstSubject"
        placeholder="请选择"
        clearable
      >
        <el-option
          label="工程与技术学科基础学科（410）"
          value="工程与技术学科基础学科（410）"
        />
        <el-option label="测绘科学技术（420）" value="测绘科学技术（420）" />
        <el-option label="材料科学（430）" value="材料科学（430）" />
        <el-option label="冶金工程技术（450）" value="冶金工程技术（450）" />
        <el-option label="机械工程（460）" value="机械工程（460）" />
        <el-option
          label="动力与电气工程（470）"
          value="动力与电气工程（470）"
        />
        <el-option label="能源科学技术（480）" value="能源科学技术（480）" />
        <el-option label="核科学技术（490）" value="核科学技术（490）" />
        <el-option
          label="电子、通信与自动控制技术（510）"
          value="电子、通信与自动控制技术（510）"
        />
        <el-option
          label="计算机科学技术（520）"
          value="计算机科学技术（520）"
        />
        <el-option label="化学工程（530）" value="化学工程（530）" />
        <el-option label="土木建筑工程（560）" value="土木建筑工程（560）" />
        <el-option label="水利工程（570）" value="水利工程（570）" />
        <el-option label="交通运输工程（580）" value="交通运输工程（580）" />
        <el-option
          label="航空、航天科学技术（590）"
          value="航空、航天科学技术（590）"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="ISSN号" prop="interNum">
      <el-input v-model="newFormInline.interNum" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="CN号" prop="cnNum">
      <el-input v-model="newFormInline.cnNum" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="DOI" prop="doi">
      <el-input v-model="newFormInline.doi" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="会议名称" prop="meetingName">
      <el-input
        v-model="newFormInline.meetingName"
        type="textarea"
        :rows="4"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item label="依托项目" prop="relyProject">
      <el-input v-model="newFormInline.relyProject" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="见刊附件" prop="seeFiles">
      <FileUpload v-model="newFormInline.seeFiles" :limit="15" />
    </el-form-item>

    <el-form-item label="检索附件" prop="searchFiles">
      <FileUpload v-model="newFormInline.searchFiles" :limit="15" />
    </el-form-item>

    <el-form-item label="关联人员" prop="userIds">
      <el-select
        v-model="newFormInline.userIds"
        clearable
        multiple
        placeholder="请选择"
        class="!w-full"
      >
        <el-option
          v-for="item in props.userList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <!-- 是否第一单位 1是 0否 -->
    <el-form-item label="是否第一单位" prop="firstUnit">
      <el-radio-group v-model="newFormInline.firstUnit">
        <el-radio :value="1">是</el-radio>
        <el-radio :value="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="获取积分" prop="score">
      <el-input-number
        v-model="newFormInline.score"
        :min="0"
        placeholder="请输入"
        class="!w-[200px]"
      />
    </el-form-item>
    <el-form-item />
  </el-form>
</template>
<style lang="scss" scoped>
.add-form {
  text-align: center;
  .el-form-item {
    width: 42%;
  }
}
</style>
